<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格数据提交</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<h2>填写表格并提交</h2>
<table id="data_table">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>邮箱</th>
    </tr>
    <tr>
        <td><input type="text" name="name"></td>
        <td><input type="number" name="age"></td>
        <td><input type="email" name="email"></td>
    </tr>
</table>
<button id="submit">提交表格</button>

<script>
    $("#submit").click(function() {
        // 获取表格数据
        var formData = {};
        $("input[name]").each(function() {
            formData[this.name] = $(this).val();
        });

        // 使用Ajax发送数据到后端
        $.ajax({
            type: "POST",
            url: "/submit_data",
            data: JSON.stringify(formData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                alert("数据提交成功：" + response.message);
            },
            error: function(error) {
                console.log(error);
                alert("数据提交失败");
            }
        });
    });
</script>

</body>
</html>